<script setup>
  import { computed } from "vue";
  import TitanCharts from "@/components/charts/src";

  const data = [
    { name: "Anti-War（反战）", value: 527480 },
    { name: "社会治安", value: 8272 },
    { name: "American politician（美政要）", value: 2028 },
    { name: "弥合分歧", value: 30394 },
    { name: "涉美军将领敏感议题", value: 13048 },
    { name: "社会经济", value: 13974 },
    { name: "Elections（选举）", value: 2260 },
    { name: "Culture（文化）", value: 23764 },
    { name: "少数弱势群体权益", value: 0 },
    { name: "民进党滥用公权力", value: 126 },
    { name: "Healthcare（医疗保健）", value: 1176 },
    { name: "台军丑闻弊案", value: 0 },
    { name: "自然灾害", value: 72 },
    { name: "兵役争议", value: 4146 },
    { name: "台军战争潜力不足", value: 0 },
    { name: "民进党执政不力", value: 1946 },
    { name: "民进党黑金政治", value: 35870 },
    { name: "能源改革", value: 26844 },
    { name: "台军内部矛盾", value: 0 },
    { name: "台社会疑美", value: 448854 },
    { name: "社会分化", value: 0 },
    { name: "Abortion(堕胎)", value: 2946 },
    { name: "台军后勤保障不力", value: 810132 },
    { name: "台军价值观不统一", value: 0 },
    { name: "Polarization（两极分化）", value: 8404 },
    { name: "Foreign Policy（外交政策）", value: 247730 },
    { name: "枪支", value: 724 },
    { name: "台军福利待遇欠佳", value: 130 },
    { name: "司法改革", value: 0 },
    { name: "台军战争压力大", value: 3700 },
    { name: "食品安全", value: 286 },
    { name: "”台独“引发战争危险", value: 30928 },
    { name: "台军事行动受挫", value: 0 },
    { name: "民进党黑金政治", value: 99999999 },
    { name: "台社会疑美", value: 99999998 },
    { name: "台军战争潜力不足", value: 99999997 },
  ];

  const maxWordSize = computed(() => {
    if (!data.length) {
      return 60;
    }
    const lenList = data.map((item) => item.name.length);
    const len = Math.max(...lenList);
    if (len > 10) {
      return 20;
    } else if (len > 5) {
      return 40;
    } else {
      return 60;
    }
  });

  const option = computed(() => {
    return {
      tooltip: { show: false },
      series: [
        {
          type: "wordCloud",
          sizeRange: [14, maxWordSize.value],
          rotationRange: [-90, 90],
          rotationStep: 45,
          gridSize: 8,
          draoOutOfBound: false,
          emphasis: { shadowBlur: 10, shadowColor: "#333" },
          textStyle: {
            textBorderWidth: 1,
            textShadowBlur: 5,
            textShadowColor: "#6AE6FF",
            color: () => {
              return "rgb(" + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(",") + ")";
            },
          },
          width: "100%",
          height: "100%",
          data,
        },
      ],
    };
  });
</script>

<template>
  <div class="chart">
    <titan-charts :options="option" />
  </div>
</template>

<style scoped lang="less">
  .chart {
    width: 100%;
    height: 300px;
  }
</style>
